<template>
  <div class="editor-item">
    <Toolbar
      style="border-bottom: 1px solid #ccc"
      :editor="editor"
      :defaultConfig="toolbarConfig"
      :mode="mode"
    />
    <Editor
      style="height: 300px; overflow-y: hidden"
      v-model="html"
      :defaultConfig="editorConfig"
      :mode="mode"
      @onCreated="onCreated"
      @onChange="onChange"
    />
  </div>
</template>

<script>
import { Editor, Toolbar } from "@wangeditor/editor-for-vue";
import { uploadAvatar } from "@/api";

export default {
  components: {
    Editor,
    Toolbar,
  },
  props: {
    value: {
      type: String,
      default: "<p></p>",
    },
  },
  data() {
    return {
      editor: null,
      html: this.value,
      toolbarConfig: {
        toolbarKeys: [
          "headerSelect",
          "blockquote",
          "|",
          "bold",
          "underline",
          "italic",
          {
            key: "group-more-style",
            title: "更多",
            iconSvg:
              '<svg viewBox="0 0 1024 1024"><path d="M204.8 505.6m-76.8 0a76.8 76.8 0 1 0 153.6 0 76.8 76.8 0 1 0-153.6 0Z"></path><path d="M505.6 505.6m-76.8 0a76.8 76.8 0 1 0 153.6 0 76.8 76.8 0 1 0-153.6 0Z"></path><path d="M806.4 505.6m-76.8 0a76.8 76.8 0 1 0 153.6 0 76.8 76.8 0 1 0-153.6 0Z"></path></svg>',
            menuKeys: ["through", "code", "sup", "sub", "clearStyle"],
          },
          "color",
          "bgColor",
          "|",
          "fontSize",
          "fontFamily",
          "lineHeight",
          "|",
          "bulletedList",
          "numberedList",
          "todo",
          {
            key: "group-justify",
            title: "对齐",
            iconSvg:
              '<svg viewBox="0 0 1024 1024"><path d="M768 793.6v102.4H51.2v-102.4h716.8z m204.8-230.4v102.4H51.2v-102.4h921.6z m-204.8-230.4v102.4H51.2v-102.4h716.8zM972.8 102.4v102.4H51.2V102.4h921.6z"></path></svg>',
            menuKeys: [
              "justifyLeft",
              "justifyRight",
              "justifyCenter",
              "justifyJustify",
            ],
          },
          {
            key: "group-indent",
            title: "缩进",
            iconSvg:
              '<svg viewBox="0 0 1024 1024"><path d="M0 64h1024v128H0z m384 192h640v128H384z m0 192h640v128H384z m0 192h640v128H384zM0 832h1024v128H0z m0-128V320l256 192z"></path></svg>',
            menuKeys: ["indent", "delIndent"],
          },
          "|",
          "emotion",
          "insertLink",
          "uploadImage",
          "insertTable",
          "codeBlock",
          "divider",
          "|",
          "undo",
          "redo",
          "|",
          "fullScreen",
        ],
      },
      editorConfig: {
        placeholder: "请输入内容...",
        MENU_CONF: {
          uploadImage: {
            fieldName: "vue-demo-fileName",
            customUpload(file, insertFn) {
              const formData = new FormData();
              formData.append("image", file);

              uploadAvatar(formData)
                .then((res) => {
                  const { url, alt, href } = res.data;
                  let imgUrl = process.env.VUE_APP_PROXY_NETWORK_TARGET + url;
                  insertFn(imgUrl, alt, href);
                })
                .catch((err) => {
                  console.log(2, "图片上传失败", err);
                });
            },
          },
          insertImage: {
            checkImage(src, alt, href) {
              if (src.indexOf("http") !== 0) {
                return "图片网址必须以 http/https 开头";
              }
              return true;
            },
          },
        },
      },
      mode: "default",
    };
  },
  watch: {
    value(newVal) {
      this.html = newVal;
    },
  },
  methods: {
    onCreated(editor) {
      this.editor = Object.seal(editor);
      this.toolbarConfig.menus = [
        "head",
        "bold",
        "fontSize",
        "fontName",
        "italic",
        "underline",
        "strikeThrough",
        "foreColor",
        "backColor",
        "link",
        "list",
        "justify",
        "quote",
        "emoticon",
        "table",
        "video",
        "code",
        "undo",
        "redo",
      ];
    },
    onChange(editor) {
      this.$emit("input", this.html);
    },
  },
};
</script>
<style src="@wangeditor/editor/dist/css/style.css"></style>

<style lang="scss" scoped>
.editor-item {
  border: 1px double #ccc;
}
</style>
